<template>
    <div style="height: 400px;position: relative;">
      <div>参考网址：https://www.makeapie.com/editor.html?c=xWkXG0IATZ</div>
      <div :id="moduleName" class="box"></div>
      <div class="xLabel">
        <div class="xText">
          <div v-for="(item,index) in xAxisData" :key="index">{{item}}</div>
        </div>
        <div class="TText">
          <div v-for="(item,index) in titleText" :key="index">{{item}}</div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  name: 'ColumnChart',
  props: {
    // 图表名称
    moduleName: {
      type: String
    },
    // 底部标题离左面位置
    location: {
      type: Array
    },
    // 底部标题大小
    titleSize: {
      type: Number,
      default: 16
    }
  },
  data () {
    return {
      // 柱状图x轴数据
      xAxisData: ['风电', '光伏', '风电', '光伏', '风电', '光伏'],
      // 柱状图x轴数据标题
      titleText: ['年有效期合格率', '工具种类合格率', '工具种类合格率']
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById(this.moduleName))
      // 绘制图表
      myChart.setOption({
        title: [
          {
            subtextStyle: {
              fontSize: 16
            },
            top: '90%'
          },
          {
            subtextStyle: {
              fontSize: 16
            },
            top: '90%',
          },
          {
            subtextStyle: {
              fontSize: 16
            },
            top: '90%',
            right: 'center'
          },
          {
            subtext: '单位：个',
            subtextStyle: {
              fontSize: 14
            },
            top: '2.5%',
            left: '3%'
          }
        ],
        legend: {
          top: '5%',
          left: '33%',
          show: true
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData,
          axisTick: {
            // length: 50, // 刻度条长度
            // interval: 1 // 刻度条间隔
            show: false
          },

          axisLabel:{
            // interval: 0,
            show: false
            //函数模板
            // formatter:function (value) {
            //   console.log(value)
            //   return '{value|'+value+' }';
            // },
            // rich: {
            //   value: {
            //     fontSize: 20,
            //     backgroundColor: 'red',
            //     borderRadius: 10,
            //     width: '100%',
            //     padding: [10,30,10,30]
            //   }
            // }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            z: 1,
            name: '',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: [5, 15, 12, 8, 5, 6],
            symbol : 'diamond',
            symbolOffset: ['-255%', '-50%'],
            symbolSize: [10,6],
            itemStyle: {
              borderColor: '#2fffa4',
              color: '#2fffa4'
            },
          },
          {
            z: 1,
            type: 'bar',
            name: '应接种',
            barWidth: '10%',
            barGap: '50%',
            data: [5, 15, 12, 8, 5, 6],
            itemStyle: {
              color: {
                type: 'linear',
                x: 0, x2: 1, y: 0, y2: 0,
                colorStops: [
                  { offset: 0, color: 'rgba(29, 245, 160, .7)' },
                  { offset: 0.5, color: 'rgba(29, 245, 160, .7)' },
                  { offset: 0.5, color: 'rgba(29, 245, 160, .3)' },
                  { offset: 1, color: 'rgba(29, 245, 160, .3)' }
                ]
              }
            },
          },
          {
            z: 2,
            name: '',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: [6, 9, 8, 7, 7, 6],
            symbol : 'diamond',
            symbolOffset: ['-85%', '-50%'],
            symbolSize: [10,6],
            itemStyle: {
              borderColor: '#32ffee',
              color: '#32ffee'
            },
          },{
            z: 2,
            type: 'bar',
            barWidth: '10%',
            barGap: '50%',
            name: '已完成第一次接种',
            data: [6, 9, 8, 7, 7, 6],
            itemStyle: {
              color: {
                type: 'linear',
                x: 0, x2: 1, y: 0, y2: 0,
                colorStops: [
                  { offset: 0, color: 'rgba(50, 255, 238, .7)' },
                  { offset: 0.5, color: 'rgba(50, 255, 238, .7)' },
                  { offset: 0.5, color: 'rgba(50, 255, 238, .3)' },
                  { offset: 1, color: 'rgba(50, 255, 238, .3)' }
                ]
              }
            },
          },
          {
            z: 3,
            name: '',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: [26, 43, 13, 40, 15, 11],
            symbol : 'diamond',
            symbolOffset: ['85%', '-50%'],
            symbolSize: [10, 6],
            itemStyle: {
              borderColor: '#6851f1',
              color: '#6851f1'
            },
          },{
            z: 3,
            type: 'bar',
            name: '已完成第二次接种',
            barWidth: '10%',
            barGap: '50%',
            data: [26, 43, 13, 40, 15, 11],
            itemStyle: {
              // normal: {
              //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              //     offset: 0,
              //     color: '#6851f1'
              //   }, {
              //     offset: 1,
              //     color: 'rgba(104,81,241, .3)'
              //   }]),
              // },
              color: {
                type: 'linear',
                x: 0, x2: 1, y: 0, y2: 0,
                colorStops: [
                  { offset: 0, color: 'rgba(104,81,241, .7)' },
                  { offset: 0.5, color: 'rgba(104,81,241, .7)' },
                  { offset: 0.5, color: 'rgba(104,81,241, .3)' },
                  { offset: 1, color: 'rgba(104,81,241, 0.3)' }
                ]
              }
            },
          },
          {
            z: 4,
            name: '',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: [26, 43, 13, 40, 15, 11],
            symbol : 'diamond',
            symbolOffset: ['255%', '-50%'],
            symbolSize: [10, 6],
            itemStyle: {
              borderColor: '#ffd11a',
              color: '#ffd11a'
            },
          },{
            z: 4,
            type: 'bar',
            barGap: '50%',
            name: '已完成第三次接种',
            barWidth: '10%',
            data: [26, 43, 13, 40, 15, 11],
            itemStyle: {
              color: {
                type: 'linear',
                x: 0, x2: 1, y: 0, y2: 0,
                colorStops: [
                  { offset: 0, color: 'rgba(255, 209, 26, .7)' },
                  { offset: 0.5, color: 'rgba(255, 209, 26, .7)' },
                  { offset: 0.5, color: 'rgba(255, 209, 26, .3)' },
                  { offset: 1, color: 'rgba(255, 209, 26, 0.3)' }
                ]
              }
            },
          },
        ]
      })
      window.addEventListener('resize', () => { myChart.resize() })
    }

  }
}
</script>
<style scoped lang="less">
.box {
  height: 100%;
  width: 100%;
  position: absolute;
}
  .xLabel{
    width: calc(100% - 110px);
    margin: 0 55px;
    position: absolute;
    bottom: -58px;
    &>div{
      width: 100%;
      display: flex;
      box-sizing: border-box;
      div{
        flex-grow: 1;
        text-align: center;
        background-color: #ccc;

      }
    }
    .xText {
      div:nth-child(odd) {
        border-radius: 10px 0 0 0;
        padding: 10px 0;
        position:relative;
        margin-left: 5px;
        /*border-right: 1px solid #fff*/
        &::after{
          content: '';
          position: absolute;
          bottom: 10px;
          /*left: 0;*/
          right: 0;
          height: 50%;
          border-right: 1px solid #fff;
          border-top-width: 0;
        }
      }
      div:nth-child(even) {
        border-radius: 0 10px 0 0 ;
        padding: 10px 0;
        margin-right: 5px;
      }
    }
    .TText{

      div{
        border-radius: 0 0 10px 10px;
        padding: 10px 0;
        position: relative;
        margin: 0 5px;
        &::after{
          content: '';
          position: absolute;
          top: 0;
          left: 10%;
          width: 80%;
          border-top: 1px solid #fff;
        }
      }
    }
  }

</style>
<style>
  .highcharts-point{
    rx: 0;
    ry: 0
  }
</style>
